<template>
	<div class="shopcar-container">
		
		<div class="goods-list">

			<!-- 商品列表区域 -->
			<div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters('getGoodsSelected')[item.id]" @change="selectedChanged(item.id, $store.getters('getGoodsSelected')[item.id])"></mt-switch>
						<img :src="item.thumb_path" alt="">
						<div class="info">
							<h1>{{ item.title }}</h1>
							<p>
								<span class="price">¥{{ item.sell_price }}</span>
								<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
								<!-- 问题: 如何从购物车中获取商品的数量呢 -->
								<!-- 1. 我们可以创建一个空对象 然后循环购物车中所有商品的数据 
								把当前循环这条数据的id, 作为对象的属性名, count值作为属性值, 这样当所有的商品都循环一遍, 就会得到一个对象 { 88: 2, 89: 1, 90: 4 } -->

								<!-- 此处的i 是为了删除goodslist中的数据的  id是为了删除store中的数据的 -->
								<a href="#" @click.prevent="remove(item.id, i)">删除</a>
							</p>
							
						</div>
					</div>
				</div>
			</div>			
		</div>	

		<!-- 结算区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner jiesuan">
					<div class="left">
						<p>总计(不含运费)</p>
						<p>已勾选商品<span class="red">{{ $store.getters.getGoodsCountAndAmount.sumcount}}</span>件,总价:<span class="red">¥{{ $store.getters.getGoodsCountAndAmount.sumprice}}</span></p>
					</div>

					<mt-button type="danger">去结算</mt-button>
				</div>
			</div>
		</div>			
	</div>
</template>

<script>
	import numbox from '../subcomponents/ShopcarContainer_numbox.vue'
	import { Toast } from 'mint-ui'
	export default {
		data() {
			return {
				goodslist: [] //购物车中所有商品的数据
			}
		},
		created() {
			this.getGoodsList()
		},
		methods: {
			getGoodsList() {
				// 1. 获取到 store 中所有的商品的id 然后拼接出一个用逗号分隔的字符串
				var idArr = []
				this.$store.state.car.forEach(item => {
					idArr.push(item.id)	
				})
				// 如果购物车中没有数据, 则直接返回 不需要请求数据接口 否则会报错
				if(idArr.length <= 0) {
					return;
				}
				// 获取购物车商品列表
				// join()方法用于把数组中的所有元素放入一个字符串 
				// 参数是可选的,指定要使用的分隔符  如果省略该参数,则使用逗号作为分隔符
				this.$route.get('api/goods/getshopcarlist/' + idArr.join(',')).then(result => {
					if(result.body.status === 0) {
						this.goodslist = result.body.message
					}else{
						Toast('获取购物车商品数据失败')
					}
				})
			},
			remove(id, index) {
				// 点击删除 把商品从 store 中根据传递的id删除  同时，把当前组件中的 goodlist中
				// 对应要删除的那个商品, 使用index来删除
				this.$store.commit('removeGoodsInfo', id)
				// 删除本地的
				this.goodslist.splice(index, 1)
			},
			selectedChanged(id, value) {
				// 每当点击开关  把最新的开关状态 同步到store中
				// console.log(id +'----'+ value)
				this.$store.commit('updateGoodsSelected', { id, selected: value })
			}
		},
		components: {
			numbox
		}
	}
</script>

<style lang="scss" scoped>
	.shopcar-container{
		background-color: #eee;
		/*css盒子模型中margin溢出问题   子盒子设置了margin 父盒子也跟着下移了,出现外边距溢出的情况*/  
		/*解决方案如下*/
		/*1.给父级设置border边框*/
		/*2.给父级设置overflow：hidden；*/
		overflow: hidden;
		.goods-list{
			.mui-card-content-inner{
				display: flex;
				aline-items:center;
			}
			img{
				width: 60px;
				height: 60px;
			}
			.info{
				display: flex;
				/*改变轴的方向*/
				flex-direction:column; 
				justify-content:space-between;
				h1{
					font-size:13px;
				}
				.price{
					color:red;
					font-weight: bold;
				}
			}
		}
		.jiesuan{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.red{
				color:red;
				font-weight: bold;
				font-size:16px;
			}
		}
	}
</style>